<template>
  <div class="memory-page">
    <!-- 背景粒子 -->
    <div id="particles-js-memory" class="particles"></div>
    
    <!-- 返回按钮 -->
    <router-link to="/" class="back-btn">
      <span>← 返回</span>
    </router-link>
    
    <!-- 主要内容 -->
    <div class="memory-content">
      <div class="memory-header" data-aos="fade-down" data-aos-duration="2000">
        <h1 class="memory-title">📸 我们的美好回忆</h1>
        <p class="memory-subtitle">每一张照片都是我们爱情的见证</p>
      </div>
      
      <!-- 时间轴 -->
      <div class="timeline-container" data-aos="fade-up" data-aos-delay="500">
        <div class="timeline">
          <div 
            v-for="(memory, index) in memories" 
            :key="index"
            class="timeline-item"
            :class="{ 'right': index % 2 === 1 }"
            :data-aos="index % 2 === 0 ? 'slide-in-left' : 'slide-in-right'"
            :data-aos-delay="1000 + index * 300"
          >
            <div class="timeline-content">
              <div class="memory-card">
                <div class="memory-image">
                  <div class="image-placeholder">
                    <span class="image-icon">{{ memory.icon }}</span>
                  </div>
                </div>
                <div class="memory-info">
                  <h3 class="memory-date">{{ memory.date }}</h3>
                  <h4 class="memory-title">{{ memory.title }}</h4>
                  <p class="memory-description">{{ memory.description }}</p>
                  <div class="memory-tags">
                    <span 
                      v-for="tag in memory.tags" 
                      :key="tag"
                      class="memory-tag"
                    >
                      {{ tag }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 照片墙 -->
      <div class="photo-wall" data-aos="fade-up" data-aos-delay="2000">
        <h2 class="photo-wall-title">💕 我们的照片墙</h2>
        <div class="photo-grid">
          <div 
            v-for="(photo, index) in photos" 
            :key="index"
            class="photo-item"
            :data-aos="'zoom-in'"
            :data-aos-delay="2500 + index * 100"
            @click="showPhotoModal(photo)"
          >
            <div class="photo-placeholder" :style="{ backgroundImage: `url(${photo.url})` }">
              <div class="photo-overlay">
                <span class="photo-date">{{ photo.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 特殊时刻 -->
      <div class="special-moments" data-aos="fade-up" data-aos-delay="3000">
        <h2 class="special-title">🌟 特殊时刻</h2>
        <div class="moments-grid">
          <div 
            v-for="(moment, index) in specialMoments" 
            :key="index"
            class="moment-card"
            :data-aos="'flip-up'"
            :data-aos-delay="3500 + index * 200"
          >
            <div class="moment-icon">{{ moment.icon }}</div>
            <h3 class="moment-title">{{ moment.title }}</h3>
            <p class="moment-description">{{ moment.description }}</p>
            <div class="moment-feeling">{{ moment.feeling }}</div>
          </div>
        </div>
      </div>
      
      <!-- 爱的统计 -->
      <div class="love-stats" data-aos="fade-up" data-aos-delay="4000">
        <h2 class="stats-title">📊 我们的爱情数据</h2>
        <div class="stats-grid">
          <div 
            v-for="(stat, index) in loveStats" 
            :key="index"
            class="stat-item"
            :data-aos="'bounce-in'"
            :data-aos-delay="4500 + index * 200"
          >
            <div class="stat-number">{{ stat.number }}</div>
            <div class="stat-label">{{ stat.label }}</div>
            <div class="stat-icon">{{ stat.icon }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 照片模态框 -->
    <div v-if="selectedPhoto" class="photo-modal" @click="closePhotoModal">
      <div class="modal-content" @click.stop>
        <div class="modal-image" :style="{ backgroundImage: `url(${selectedPhoto.url})` }">
        </div>
        <div class="modal-info">
          <h3>{{ selectedPhoto.title }}</h3>
          <p>{{ selectedPhoto.description }}</p>
          <span class="modal-date">{{ selectedPhoto.date }}</span>
        </div>
        <button class="modal-close" @click="closePhotoModal">×</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { initParticles } from '../utils/particles.js'
import { loveConfig, loveUtils } from '../config/love-config.js'

export default {
  name: 'Memory',
  setup() {
    const selectedPhoto = ref(null)
    
    const memories = (loveConfig?.importantDates || []).map(date => ({
      date: loveUtils.formatDate(date.date),
      title: date.title,
      description: date.description,
      icon: date.icon,
      tags: [date.title.split('的')[0], '美好回忆']
    }))
    
    const photos = (loveConfig?.photos || []).map(photo => ({
      icon: '📷',
      date: loveUtils.formatDate(photo.date),
      title: photo.title,
      description: photo.description,
      url: photo.url
    }))
    
    const specialMoments = [
      {
        icon: '💍',
        title: '第一次牵手',
        description: '在公园里，我们第一次牵起了手，那一刻心跳加速，手心出汗。',
        feeling: '紧张又甜蜜'
      },
      {
        icon: '💋',
        title: '第一个吻',
        description: '在星空下，我们分享了第一个吻，那一刻时间仿佛静止了。',
        feeling: '浪漫至极'
      },
      {
        icon: '🏠',
        title: '同居生活',
        description: '开始同居生活，每天都能看到你，这是最幸福的事情。',
        feeling: '温馨幸福'
      },
      {
        icon: '🐕',
        title: '养宠物',
        description: '我们一起养了一只小狗，它成为了我们家庭的一员。',
        feeling: '充满爱意'
      }
    ]
    
    const loveStats = [
      { number: '365', label: '天', icon: '📅' },
      { number: '8760', label: '小时', icon: '⏰' },
      { number: '1000+', label: '次拥抱', icon: '🤗' },
      { number: '500+', label: '次亲吻', icon: '💋' },
      { number: '50+', label: '次约会', icon: '💕' },
      { number: '10+', label: '次旅行', icon: '✈️' }
    ]
    
    const showPhotoModal = (photo) => {
      selectedPhoto.value = photo
    }
    
    const closePhotoModal = () => {
      selectedPhoto.value = null
    }
    
    onMounted(() => {
      // 初始化粒子效果
      initParticles('particles-js-memory')
    })
    
    return {
      memories,
      photos,
      specialMoments,
      loveStats,
      selectedPhoto,
      showPhotoModal,
      closePhotoModal,
      loveConfig,
      loveUtils
    }
  }
}
</script>

<style scoped>
.memory-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
  padding: 2rem;
}

.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 100;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-5px);
}

.memory-content {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 4rem;
}

.memory-header {
  text-align: center;
  margin-bottom: 4rem;
}

.memory-title {
  font-size: 3rem;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.memory-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
}

/* 时间轴样式 */
.timeline-container {
  margin-bottom: 4rem;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background: rgba(255, 255, 255, 0.3);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
  border-radius: 3px;
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}

.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background: #ff6b9d;
  border: 4px solid white;
  border-radius: 50%;
  top: 15px;
  right: -17px;
  z-index: 1;
}

.timeline-item.right {
  left: 50%;
}

.timeline-item.right::after {
  left: -16px;
}

.timeline-content {
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.memory-card {
  display: flex;
  gap: 1rem;
}

.memory-image {
  flex-shrink: 0;
}

.image-placeholder {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #ff6b9d, #c44569);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.memory-info {
  flex: 1;
}

.memory-date {
  font-size: 0.9rem;
  color: #ff6b9d;
  margin-bottom: 0.5rem;
}

.memory-title {
  font-size: 1.3rem;
  color: white;
  margin-bottom: 0.5rem;
  font-family: 'LoveFont', cursive;
}

.memory-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.memory-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.memory-tag {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.2rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
}

/* 照片墙样式 */
.photo-wall {
  margin-bottom: 4rem;
}

.photo-wall-title {
  text-align: center;
  font-size: 2.5rem;
  color: white;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.photo-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

.photo-item:hover {
  transform: scale(1.05);
}

.photo-placeholder {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  overflow: hidden;
}

.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.9rem;
}

/* 特殊时刻样式 */
.special-moments {
  margin-bottom: 4rem;
}

.special-title {
  text-align: center;
  font-size: 2.5rem;
  color: white;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.moments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.moment-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.moment-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.15);
}

.moment-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.moment-title {
  font-size: 1.3rem;
  color: white;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.moment-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 1rem;
  font-family: 'LoveFont', cursive;
}

.moment-feeling {
  color: #ff6b9d;
  font-weight: bold;
  font-style: italic;
}

/* 统计样式 */
.love-stats {
  margin-bottom: 2rem;
}

.stats-title {
  text-align: center;
  font-size: 2.5rem;
  color: white;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'LoveFont', cursive;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
}

.stat-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.15);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #ff6b9d;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: white;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.stat-icon {
  font-size: 1.5rem;
}

/* 模态框样式 */
.photo-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  position: relative;
}

.modal-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  margin-bottom: 1rem;
}

.modal-info h3 {
  color: #333;
  margin-bottom: 0.5rem;
}

.modal-info p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.modal-date {
  color: #ff6b9d;
  font-weight: bold;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
}

.modal-close:hover {
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .memory-page {
    padding: 1rem;
  }
  
  .memory-title {
    font-size: 2rem;
  }
  
  .timeline::after {
    left: 31px;
  }
  
  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  
  .timeline-item::after {
    left: 15px;
  }
  
  .timeline-item.right {
    left: 0%;
  }
  
  .photo-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .moments-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
